<template>
  <div class="home">
    <van-search v-model="value" placeholder="请输入女装名称" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in banners" :key="index">
        <img :src="item" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 列表 -->
    <van-grid column-num="3" icon-size="50px">
      <van-grid-item
        :icon="item.coverImg"
        :id="item._id"
        v-for="(item,index) in sort"
        :key="index"
        :text="item.name"
        @click="runList(item._id)"
      />
    </van-grid>
    <!-- 商品信息 -->
    <div class="goods">
      <div class="juli" v-for="(item, index) in hotshops" :key="index">
        <van-card
          class="goodsOne"
          num="1"
          :price="item.price"
          :title="item.name"
          :thumb="item.coverImg"
          @click="homeToDetails(item,$event)"
        ></van-card>
        <template>
          <van-button
            style="position: relative;z-index:999"
            @click="shoucang(item)"
            size="mini"
            type="info"
            class="shopFooter"
          >{{item.shou}}</van-button>
          <van-button
            @click="homeToDetails(item,$event)"
            size="mini"
            type="primary"
            class="shopFooter"
          >购买</van-button>
        </template>
      </div>
      <!-- 自动下一页 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item,index) in hotshops" :key="index" />
      </van-list>
    </div>
  </div>
</template>

<script>
import { loadBanner, sort, hotShop } from "../services/dress";
import { Search } from "vant";
import { List } from "vant";
import { getCookie, setCookie, delCookie } from "../utils/request";

export default {
  name: "Home",
  data() {
    return {
      banners: [
        "http://img.alicdn.com/imgextra/i2/75/O1CN01GuzK9C1CQOK5g0b6E_!!75-0-luban.jpg",
        "http://gw.alicdn.com/imgextra/i2/27/O1CN0137WZzY1C4PJOoNmUB_!!27-0-lubanu.jpg",
        "https://aecpm.alicdn.com/simba/img/TB1VORANQT2gK0jSZFkSuwIQFXa.jpg_q50.jpg",
        "//gw.alicdn.com/imgextra/i2/120/O1CN01ZgTOKO1Cl095GakIh_!!120-0-lubanu.jpg",
        "//gw.alicdn.com/imgextra/i1/129/O1CN019Hl5Hp1Cp7i1W747x_!!129-0-lubanu.jpg",
      ],
      value: "",
      // 分类
      sort: [],
      // 首页商品
      hotshops: [],
      list: [],
      loading: false,
      finished: false,
      num: 1,
      hot: "",
      shou: "收藏",
    };
  },
  created() {
    // console.log(this.hotshops);
    sort().then((res) => {
      const oldsort = res.data.categories;
      this.sort = oldsort.filter((item) => {
        return item.coverImg;
      });
      this.hot = oldsort.filter((item) => {
        return item.name === "热卖";
      });

      res.data.categories.forEach((item, index) => {
        if(item.name === "热卖"){
        this.hotId = res.data.categories[index]._id
        }
      })


    });
    hotShop(this.hotId).then((res) => {
      console.log(res);
      this.hotshops = res.data.products;
      this.hotshops = [...this.hotshops, res.data.products];
      console.log(this.hotshops);
    });
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.num++;
        hotShop(this.hot[0]._id, this.num).then((res) => {
          // this.hotshops = res.data.products;
          const message = this.hotshops;
          for (let i = 0; i < res.data.products.length; i++) {
            res.data.products[i].shou = "收藏";
            if (getCookie()) {
              // console.log(getCookie());
              getCookie().forEach((item) => {
                // var obj = this.list;
                if (
                  res.data.products[i]._id == item.id &&
                  res.data.products[i].productCategory._id == item.fatherID
                ) {
                  // console.log("aaa");
                  res.data.products[i].control = true;
                  // console.log(res.data.products[i].control);
                  if (res.data.products[i].control) {
                    res.data.products[i].shou = "已收藏";
                  } else {
                    res.data.products[i].shou = "收藏";
                    res.data.products[i].control = false;
                  }
                }
              });
            }
            message.push(res.data.products[i]);
          }

          // console.log(message);
          this.hotshops = message;
        });
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.hotshops.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    runList(id) {
      this.$router.push({
        name: "SortList",
      });
      this.$store.commit("emit", id);
    },
    homeToDetails(item, event) {
      // console.log(item);
      // console.log(event.currentTarget);
      this.$store.commit("toDetails", item);
      this.$router.push({
        name: "Details",
      });
    },
    shoucang(item) {
      console.log(item);
      item.control = !item.control;
      if (item.control) {
        item.shou = "已收藏";
        setCookie(item);
      } else {
        item.shou = "收藏";
        delCookie(item);
      }
      // this.$router.push({
      //   name: "Home",
      // });
      return false;
    },
  },
};
</script>
<style>
.my-swipe .van-swipe-item img {
  width: 100%;
}
.girlTops {
  background: url(http://m.360buyimg.com/babel/jfs/t1/128371/32/10481/28561/5f432131Efa4f992f/44438409f8890a19.png);
}
/* .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
} */
.juli {
  margin-bottom: 10px;
}
.goods {
  margin-top: 10px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
}
.goods .goodsOne {
  margin: 0 0 10px 0;
  padding: 0;
  width: 180px;
  /* padding: 8px 8px; */
}
.goods .shopFooter {
  float: left;
}
.van-card__thumb {
  width: 40%;
}
.van-card__content {
  width: 60%;
}
</style>
